<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <template>
            <div class="el-chart">
              <ul style="margin: 20px auto;">
                <li style="padding-left: 10px; padding-right: 20px;">
                  <i style="font-size: 60px;margin-top: 30px;" class="el-icon-user-solid"></i>
                  <el-col :xs="6" :sm="6" :lg="12" class="card-panel-col" style="float: right;margin-top: 30px;">
                    <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                      <div class="card-panel-icon-wrapper icon-people">
                        <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text" style="margin-bottom: 10px;font-size: 18px;font-weight: bold;color: #606266;">
                          班 级 数
                        </div>
                        <count-to :start-val="0" :end-val="21" :duration="2600" class="card-panel-num"/>
                      </div>
                    </div>
                  </el-col>
                </li>
                <li style="padding-left: 10px; padding-right: 20px;">
                  <i style="font-size: 60px;margin-top: 30px;" class="el-icon-s-comment"></i>
                  <el-col :xs="6" :sm="6" :lg="12" class="card-panel-col" style="float: right;margin-top: 30px;">
                    <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                      <div class="card-panel-icon-wrapper icon-people">
                        <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text" style="margin-bottom: 10px;font-size: 18px;font-weight: bold;color: #606266;">
                          课 程 数
                        </div>
                        <count-to :start-val="0" :end-val="55" :duration="2600" class="card-panel-num"/>
                      </div>
                    </div>
                  </el-col>
                </li>
                <li style="padding-left: 10px; padding-right: 20px;">
                  <i style="font-size: 60px;margin-top: 30px;" class="el-icon-message-solid"></i>
                  <el-col :xs="6" :sm="6" :lg="12" class="card-panel-col" style="float: right;margin-top: 30px;">
                    <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                      <div class="card-panel-icon-wrapper icon-people">
                        <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text" style="margin-bottom: 10px;font-size: 18px;font-weight: bold;color: #606266;">
                          及 格 率
                        </div>
                        <count-to :start-val="0" :end-val="99" :duration="2600" class="card-panel-num"/>
                      </div>
                    </div>
                  </el-col>
                </li>
                <li style="padding-left: 10px; padding-right: 20px;">
                  <i style="font-size: 60px;margin-top: 30px;" class="el-icon-s-promotion"></i>
                  <el-col :xs="6" :sm="6" :lg="12" class="card-panel-col" style="float: right;margin-top: 30px;">
                    <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                      <div class="card-panel-icon-wrapper icon-people">
                        <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text" style="margin-bottom: 10px;font-size: 18px;font-weight: bold;color: #606266;">
                          学生数
                        </div>
                        <count-to :start-val="0" :end-val="301" :duration="2600" class="card-panel-num"/>
                      </div>
                    </div>
                  </el-col>
                </li>
              </ul>
            </div>
          </template>
          <div class="el-chart-a">
            <li id="main5" class="el-chart-1">
              <chart height="100%" width="100%"/>
            </li>
            <li id="main6" class="el-chart-2">
              <chart height="100%" width="100%"/>
            </li>
          </div>
          <div id="main7" class="el-chart-b">
            <chart height="100%" width="100%" />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/studentSide/left'
import Top from '@/components/studentSide/top'
import * as echarts from 'echarts'
import CountTo from 'vue-count-to'

export default {
  data () {
    return {
    }
  },
  components: {
    Left,
    Top,
    CountTo
  },
  methods: {
    handleSetLineChartData (type) {
      this.$emit('handleSetLineChartData', type)
    }
  },
  mounted: function () {
    // 初始化echart实例
    var myChart7 = echarts.init(document.getElementById('main7'))
    var option7
    var myChart6 = echarts.init(document.getElementById('main6'))
    var option6
    var ROOT_PATH =
      'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

    var myChart5 = echarts.init(document.getElementById('main5'))
    var option5

    option7 = {
      title: {
        text: '本周各科每日作业'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['JavaEE', '数据库原理', '操作系统', '计算机组成原理', '软件工程']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'JavaEE',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [2, 3, 1, 7, 4, 5, 2]
        },
        {
          name: '数据库原理',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [2, 12, 11, 2, 9, 3, 3]
        },
        {
          name: '操作系统',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [4, 11, 1, 14, 10, 3, 4]
        },
        {
          name: '计算机组成原理',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [3, 4, 4, 8, 1, 3, 6]
        },
        {
          name: '软件工程',
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [3, 4, 2, 4, 2, 11, 8]
        }
      ]
    }
    option7 && myChart7.setOption(option7)
    option6 = {
      title: {
        text: '最近三月各班作业未提交人数',
        left: 'center'
      },
      legend: {
        bottom: 10
      },
      tooltip: {},
      dataset: {
        source: [
          ['product', '19软工一', '19软工2', '20计科'],
          ['9月', 3, 5, 1],
          ['10月', 2, 4, 1],
          ['11月', 2, 1, 0]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    }

    option6 && myChart6.setOption(option6)
    // eslint-disable-next-line no-unused-vars
    const weatherIcons = {
      Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
      Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
      Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
    }
    option5 = {
      title: {
        text: '性别比例',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        bottom: 10,
        left: 'center',
        data: ['男', '女']
      },
      series: [
        {
          type: 'pie',
          radius: '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: [

            { value: 400, name: '女' },
            { value: 601, name: '男' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }

    option5 && myChart5.setOption(option5)
  }

}

</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
<style scoped>
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: white;
}
.el-chart-a{
  width: 1200px;
  height: 500px;
  margin: 10px auto;
}
.el-chart-1{
  width: 500px;
  height: 500px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  list-style-type: none;
  margin-right: 30px;
}
.el-chart-2{
  width: 500px;
  height: 500px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  list-style-type: none;
}
.el-chart-b{
  width: 1200px;
  height: 500px;
  margin: 20px auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
}
li{
  float: left;
}
.el-chart{
  width: 100%;
  height: 250px;
}
.el-chart ul li{
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  width: 220px;
  height: 120px;
  /*border: 1px solid gold;*/
  list-style-type: none;
  margin-right: 50px;
}
.el-chart ul li:hover{
  background-color: #eee;
}
</style>
